<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="/static/favicon.png">
    <title>数据可视化页</title>

    <!-- 引入首页相同的样式 -->
    <style>
        /* 全局样式（与首页一致） */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-image: url("/static/bgimg.png");
            background-size: cover;
            background-position: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            min-height: 100vh;
            margin: 0;
            padding: 20px;
            box-sizing: border-box;
        }

        .content-container {
            width: 100%;
            max-width: 950px;
            background-color: rgba(255, 255, 255, 0.5);
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        h1 {
            color: #238ccd;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
            margin-bottom: 20px;
        }

        .nav-links {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 30px;
            flex-wrap: wrap;
        }

        .nav-links a {
            background-color: #238ccd;
            color: white;
            text-decoration: none;
            border-radius: 15px;
            padding: 10px 20px;
            transition: background-color 0.3s ease;
        }

        .nav-links a:hover,
        .nav-links a.active {
            background-color: #1a6fa3;
            font-weight: 600;
        }

        /* 图表切换按钮样式 */
        .chart-buttons {
            display: flex;
            gap: 10px;
            margin-bottom: 30px;
        }

        .chart-btn {
            background-color: #238ccd;
            color: white;
            padding: 8px 16px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .chart-btn.active {
            background-color: #1a6fa3;
            font-weight: 600;
        }

        /* 图表容器样式 */
        .chart-container {
            width: 100%;
            max-width: 800px;
            height: 500px;
            background-color: rgba(255, 255, 255, 0.9);
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            display: none;
        }

        .chart-container.active {
            display: block;
        }
    </style>
</head>

<body>
    <div class="content-container">
        <!-- 页面标题 -->
        <h1>欢迎使用豆瓣网</h1>

        <!-- 导航链接 -->
        <div class="nav-links">
            <a href="/">首页</a>
            <a href="/list">电影类型列表</a>
            <a href="/add">添加电影类型</a>
            <a href="/addMovie">添加电影</a>
            <a href="/dataView" class="active">数据可视化</a>
            <!-- <a href="bing" target="_blank">查看饼状图</a> -->
        </div>

        <!-- 图表切换按钮 -->
        <div class="chart-buttons">
            <button class="chart-btn active" data-chart="bar">柱状图</button>
            <button class="chart-btn" data-chart="pie">饼状图</button>
            <button class="chart-btn" data-chart="avg">类型平均分</button>
        </div>

        <!-- 柱状图容器 -->
        <div id="bar-container" class="chart-container active">
            <div id="bar-chart" style="width: 100%; height: 100%;"></div>
        </div>

        <!-- 饼状图容器 -->
        <div id="pie-container" class="chart-container">
            <div id="pie-chart" style="width: 100%; height: 100%;"></div>
        </div>

        <!-- 类型平均分容器 -->
        <div id="avg-container" class="chart-container">
            <div id="avg-chart" style="width: 100%; height: 100%;"></div>
        </div>
    </div>

    <!-- 引入 ECharts 和 jQuery -->
    <script src="https://fastly.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

    <script type="text/javascript">
        // 状态变量
        let isBarInitialized = false,
            isPieInitialized = false,
            isAvgInitialized = false;

        // 图表实例
        let barChart, pieChart, avgChart;

        // 切换图表函数
        function switchChart(chartType) {
            $('.chart-container').removeClass('active');
            $('.chart-btn').removeClass('active');
            $(`#${chartType}-container`).addClass('active');
            $(`[data-chart="${chartType}"]`).addClass('active');

            setTimeout(() => {
                switch (chartType) {
                    case 'bar':
                        initOrResize('bar', loadBarChart);
                        break;
                    case 'pie':
                        initOrResize('pie', loadPieChart);
                        break;
                    case 'avg':
                        initOrResize('avg', loadAvgChart);
                        break;
                }
            }, 100);
        }

        // 初始化或刷新图表
        function initOrResize(type, loader) {
            const chartId = `${type}-chart`;
            const chartContainer = document.getElementById(chartId);

            if (type === 'bar' && !isBarInitialized) {
                barChart = echarts.init(chartContainer);
                loader();
                isBarInitialized = true;
            } else if (type === 'pie' && !isPieInitialized) {
                pieChart = echarts.init(chartContainer);
                loader();
                isPieInitialized = true;
            } else if (type === 'avg' && !isAvgInitialized) {
                avgChart = echarts.init(chartContainer);
                loader();
                isAvgInitialized = true;
            } else if (type === 'bar' && isBarInitialized) {
                barChart.resize();
            } else if (type === 'pie' && isPieInitialized) {
                pieChart.resize();
            } else if (type === 'avg' && isAvgInitialized) {
                avgChart.resize();
            }
        }

        // 加载柱状图数据（带悬浮提示和顶部标签）
        function loadBarChart() {
            $.ajax({
                url: "http://121.199.61.105/zhuData",
                dataType: "json",
                success: (data) => {
                    const option = {
                        color: ['#238ccd'],
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: { type: 'shadow' },
                            formatter: (params) => `${params[0].value}` // 直接使用 params.value
                        },
                        dataset: [
                            { dimensions: ['tname', 'tcount'], source: data },
                            { transform: { type: 'sort', config: { dimension: 'tcount', order: 'desc' } } }
                        ],
                        xAxis: {
                            type: 'category',
                            axisLabel: { interval: 0, rotate: 30, textStyle: { color: '#333' } }
                        },
                        yAxis: {
                            axisLine: { lineStyle: { color: '#ddd' } },
                            splitLine: { lineStyle: { color: '#f5f5f5' } }
                        },
                        series: {
                            type: 'bar',
                            encode: { x: 'tname', y: 'tcount' },
                            datasetIndex: 1,
                            itemStyle: { borderRadius: 5, emphasis: { shadowBlur: 10 } },
                            // 添加顶部标签（直接使用 params.value，无需索引数组）
                            label: {
                                show: true,
                                position: 'top',
                                formatter: (params) => params.value[1] // 直接显示数值
                            }
                        },
                    };
                    barChart.setOption(option);
                }
            });
        }

        // 加载饼状图数据
        function loadPieChart() {
            $.ajax({
                url: "http://121.199.61.105/bingData",
                dataType: "json",
                success: (data) => {
                    const option = {
                        tooltip: { trigger: 'item' },
                        legend: { top: '5%', left: 'center' },
                        series: [{
                            name: '',
                            type: 'pie',
                            radius: ['40%', '70%'],
                            itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 },
                            label: { show: false },
                            emphasis: { label: { show: true, fontSize: 16 } },
                            data: data
                        }]
                    };
                    pieChart.setOption(option);
                }
            });
        }

        // 加载类型平均分数据（带悬浮提示）
        function loadAvgChart() {
            $.ajax({
                url: "http://121.199.61.105/scoreData",
                dataType: "json",
                success: (data) => {
                    const option = {
                        color: ['#238ccd'],
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: { type: 'shadow' },
                            formatter: function (params) {
                                // 确保正确处理浮点数显示
                                const value = params[0].value;
                                const formattedValue = typeof value === 'number' ? value.toFixed(2) : value;
                                return `${formattedValue}`;
                            }
                        },
                        dataset: [
                            { dimensions: ['tname', 'avgscore'], source: data },
                            { transform: { type: 'sort', config: { dimension: 'avgscore', order: 'desc' } } }
                        ],
                        xAxis: {
                            type: 'category',
                            axisLabel: { interval: 0, rotate: 30, textStyle: { color: '#333' } }
                        },
                        yAxis: {
                            axisLine: { lineStyle: { color: '#ddd' } },
                            splitLine: { lineStyle: { color: '#f5f5f5' } }
                        },
                        series: {
                            type: 'bar',
                            encode: { x: 'tname', y: 'avgscore' },
                            datasetIndex: 1,
                            itemStyle: { borderRadius: 5, emphasis: { shadowBlur: 10 } },
                            // 添加标签显示
                            label: {
                                show: true,
                                position: 'top',
                                formatter: function (params) {
                                    return params.value[1].toFixed(2);
                                }
                            }
                        }
                    };
                    avgChart.setOption(option);
                }
            });
        }

        // 初始加载柱状图
        switchChart('bar');

        // 绑定按钮事件
        $('.chart-btn').on('click', function () {
            switchChart($(this).data('chart'));
        });

        // 窗口缩放
        window.addEventListener('resize', () => {
            isBarInitialized && barChart.resize();
            isPieInitialized && pieChart.resize();
            isAvgInitialized && avgChart.resize();
        });
    </script>
</body>

</html>